<!DOCTYPE html>
<html lang="en"
      xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<!-- 继承公共公共样式 -->
<div th:replace="common/common::html"></div>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="#{recycle.page.title}"></title>
    <link th:href="@{/assets/css/page.css}" rel="stylesheet"/>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;

        // 页面自适应
        function resizePageSize() {
            _gridWidth = $(document).width() - 12;
            _gridHeight = $(document).height() - 65 - 40;
        }

        $(function () {
            resizePageSize();
            // 调整列宽度，让表格更紧凑
            var fileNameWidth = Math.max(300, _gridWidth * 0.4);  // 文件名列占40%，最小300px
            var fileSizeWidth = 100;  // 文件大小列固定100px
            var deleteTimeWidth = 150;  // 删除时间列固定150px
            var operationWidth = 80;   // 操作列固定80px（只有恢复按钮）

            // 初始化flexigrid表格
            $("#flexigrid-id").flexigrid({
                width: _gridWidth,
                height: _gridHeight,
                url: /*[[@{/recycle/list}]]*/"",
                dataType: 'json',
                colModel: [
                    {display: 'fileId', name: 'fileId', width: 150, sortable: false, align: 'center', hide: 'true'},
                    {
                        display: /*[[#{file.name}]]*/"",
                        name: 'fileName',
                        width: fileNameWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{file.size}]]*/"",
                        name: 'fileSize',
                        width: fileSizeWidth,
                        sortable: true,
                        align: 'center',
                        process: function (v, trid, _row) {
                            return formatFileSize(v);
                        }
                    },

                    {
                        display: /*[[#{recycle.delete.time}]]*/"",
                        name: 'deleteTime',
                        width: deleteTimeWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{common.operation}]]*/"",
                        name: 'fileId',
                        width: operationWidth,
                        sortable: false,
                        align: 'center',
                        process: function (v, trid, _row) {
                            var html = `<div style="white-space: nowrap;">`;
                            // 恢复按钮
                            html += `<a href="#" class="btn btn-sm" onclick="restoreFile('${v}','${_row.fileName}')" title=[[#{recycle.restore}]]>
                                        <i class="glyphicon glyphicon-repeat"></i>
                                      </a>`;
                            // 彻底删除按钮
                            html += `<a href="#" class="btn btn-sm" onclick="deletePermanently('${v}','${_row.fileName}')" title=[[#{recycle.delete.permanently}]]>
                                        <i class="glyphicon glyphicon-trash"></i>
                                      </a>`;
                            html += `</div>`;
                            return html;
                        }
                    }
                ],
                resizable: false,
                useRp: true,
                usepager: true,
                autoload: false,
                hideOnSubmit: true,
                showcheckbox: true,
                rowbinddata: true
            });

            // 初始加载数据
            query();
        });

        // 查询函数
        function query() {
            $("#flexigrid-id").flexOptions({
                extParam: [
                    {name: 'fileName', value: $("#search-filename-id").val()}
                ]
            }).flexReload();
        }

        // 刷新函数
        function refresh() {
            $("#search-filename-id").val('');
            query();
        }

        // 文件大小格式化函数
        function formatFileSize(bytes) {
            if (!bytes || bytes == '0') return '0 B';
            const k = 1024;
            const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }



        // 恢复文件
        function restoreFile(fileId, fileName) {
            if (confirm('确定要恢复文件 "' + (fileName || '该文件') + '" 吗？\n\n文件将恢复到原来的位置。')) {
                $.ajax({
                    type: 'post',
                    dataType: 'json',
                    url: /*[[@{/recycle/restore}]]*/"", // 对应后端的 /recycle/restore 路径
                    data: {fileId: fileId},
                    success: function (data) {
                        message(data.msg);
                        if (data.success) {
                            $("#flexigrid-id").flexReload();
                        }
                    },
                    error: function () {
                        message(/*[[#{common.error}]]*/'');
                    }
                });
            }
        }

        // 彻底删除文件
        function deletePermanently(fileId, fileName) {
            if (confirm('警告：确定要彻底删除文件 "' + fileName + '" 吗？\n\n彻底删除后文件将无法恢复！')) {
                $.ajax({
                    type: 'post',
                    dataType: 'json',
                    url: /*[[@{/recycle/delete}]]*/"", // 对应后端的 /recycle/delete 路径
                    data: {fileId: fileId},
                    success: function (data) {
                        message(data.msg);
                        if (data.success) {
                            $("#flexigrid-id").flexReload();
                        }
                    },
                    error: function () {
                        message(/*[[#{common.error}]]*/'');
                    }
                });
            }
        }


    </script>
</head>
<body>
<header>
    <!-- 搜索条件 -->
    <input id="search-filename-id" th:placeholder="#{file.name.plc}" placeholder="请输入文件名">

    <!-- 搜索按钮 -->
    <a href="#" class="btn-info btn" onclick="query()">
        <i class="glyphicon glyphicon-search"></i>
        <span th:text="#{common.query}">查询</span>
    </a>

    <!-- 刷新按钮 -->
    <a href="#" class="btn-success btn" onclick="refresh()">
        <i class="glyphicon glyphicon-refresh"></i>
        <span th:text="#{common.refresh}">刷新</span>
    </a>
</header>
<table id="flexigrid-id"></table>
</body>
</html>
